<template>
	<view>
		<view class="nav-box">
			<view class="nav">
				<image class="nav-image" src="../../static/images/icons/back.svg" @click="back"></image>
				<view class="nav-title">我的帖子</view>
				<button class="nav-button" style="opacity:0;">收藏</button>
			</view>
		</view>
		<!-- 帖子列表 -->
		<view class="post-list">
			<!-- 帖子 -->
			<view class="post-box" v-for="(item,index) in postList" @click="()=>toPost(item.id)">
				<!-- 用户信息 -->
				<view class="user-info">
					<!-- 用户头像 -->
					<image :src="item.avatarPath" mode=""></image>
					<view>
						<view class="nickname">
							{{item.nickname}}
						</view>
						<view class="updatetime">
							发布于 {{getFormatTime(item.createTime)}}
						</view>
					</view>
				</view>
				<view class="post">
					<!-- 帖子缩略图 -->
					<image v-if="item.image != ''" :src="imageList[index]" mode="heightFix"></image>
					<!-- 帖子标题 -->
					<view class="post-title">
						<span class="post-status" v-if="item.status == -1" style="background-color: rgba(255, 0, 4, 0.5);">拒绝通过</span>
						<span class="post-status" v-else-if="item.status == 0" style="background-color: rgba(255, 170, 0, 0.5);">审核中</span>
						<span class="post-status" v-else-if="item.status == 1" style="background-color: rgba(0, 170, 0, 0.5);">审核通过</span>
						{{item.title}}
					</view>
					<view class="post-content">{{item.content}}</view>
				</view>
				<!-- 帖子数据 -->
				<view class="data">
					<view class="data-left">
						<view class="image-box">
							<image src="../../static/images/icons/watch.png"></image>
							<view>{{item.watchCount}}</view>
						</view>
					</view>
					<view class="data-right">
						<view class="image-box">
							<image src="../../static/images/icons/remark.png"></image>
							<view>{{item.remarkCount}}</view>
						</view>
						<view class="image-box">
							<image src="../../static/images/icons/like.png"></image>
							<view>{{item.likeCount}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="none-show" v-if="show">
			<image src="../../static/images/user/none.webp" mode="aspectFit"></image>
			<view class="">此处万里无云</view>
		</view>
	</view>
</template>

<script>
	import { baseUrl } from "../../static/js/config.js"
	import {PostList} from "../../static/js/Post.js"
	export default {
		data() {
			return {
				postList:[],
				imageList:[],
				show:false,
				queryForm:{
					"pageNum":1,
					"pageSize":10,
					"orderByColumn":'id',
				}
			}
		},
		onShow(){
			this.userInfo = uni.getStorageSync("userInfo")
			this.queryForm.userId = this.userInfo.id
			this.getList()
		},
		onPullDownRefresh(){
			this.userInfo = uni.getStorageSync("userInfo")
			this.queryForm.userId = this.userInfo.id
			this.getList()
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			getList(){
				PostList(this.queryForm).then(res=>{
					this.postList = res.data.records
					var image = ""
					for(var i=0;i < this.postList.length;i++){
						image = JSON.parse(this.postList[i].image)
						this.imageList.push(baseUrl+'/image/posts/'+image.userId+'/'+image.postCount+'/0.png')
					}
					if(res.data.records.length == 0){
						this.show = true
					}
					uni.stopPullDownRefresh()
				})
			},
			getFormatTime(datetime){
				if(datetime){
					var dt = new Date(datetime);
					let year = dt.getFullYear();
					let month = (dt.getMonth() + 1).toString().padStart(2,'0');
					let date = dt.getDate().toString().padStart(2,'0');
					let hour = dt.getHours().toString().padStart(2,'0');
					let minute = dt.getMinutes().toString().padStart(2,'0');
					let second = dt.getSeconds().toString().padStart(2,'0');
					return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
				}
			},
			toPost(id){
				uni.navigateTo({
					url:"/pages/post/post?id=" + id
				})
			}
		}
	}
</script>

<style>
	@import url("../../static/css/base.css");
	.post-list{
		position: relative;
		top: 180rpx;
		margin: 10rpx 20rpx;
		padding-bottom: 20rpx;
	}
	.post-box{
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		z-index: 50;
	}
	.user-info{
		display: flex;
	}
	.user-info image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.user-info > view{
		margin-left: 20rpx;
	}
	.user-info .nickname{
		margin-top: 7rpx;
		font-size: 26rpx;
		font-weight: bold;
	}
	.user-info .updatetime{
		margin-top: 7rpx;
		font-size: 24rpx;
		color: gray;
	}
	.post{
		margin-top: 20rpx;
	}
	.post image{
		height: 300rpx;
		border-radius: 20rpx;
	}
	.post .post-title{
		margin: 20rpx 0;
		font-weight: bolder;
		font-size: 32rpx;
		
	}
	.post .post-content{
		color: gray;
		font-size: 28rpx;
		overflow: hidden;      
		word-break: break-all; 
		text-overflow: ellipsis; 
		display: -webkit-box;
		-webkit-box-orient: vertical; 
		-webkit-line-clamp: 2; 
	}
	.data{
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.data-right{
		display: flex;
	}
	.image-box{
		display: inline-flex;
		color: gray;
		width: 100rpx;
	}
	.image-box image{
		height: 30rpx;
		width: 30rpx;
	}
	.image-box view{
		margin-left: 10rpx;
		line-height: 30rpx;
		font-size: 24rpx;
	}
	.none-show {
		position: relative;
		text-align: center;
		top: 400rpx;
		color: #7d7d7d;
	}
	.none-show image{
		margin: 0 auto;
		width: 300rpx;
		height: 300rpx;
	}
	.post-status{
		border-radius: 5rpx;
		margin: 0rpx 5rpx;
		padding:0rpx 10rpx;
		font-size: 24rpx;
		color: white;
	}

</style>
